<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>性别</title>
       <link rel="stylesheet" href="../ionic-v1.3.3/css/ionic.css" />
        <script type="text/javascript" src="../ionic-v1.3.3/js/ionic.bundle.min.js" ></script>
    </head>
    <style type="text/css">
      .item-radio input:checked + .radio-content .item-content {
          background-color: #E1F8FF !important;
          outline:1px solid #99D5E9;
      }
      html{font-size: 20px;}
      .item{
        margin:1rem; 
       
      }
     .item-radio .item-content{
         border:none;
         background-color: #F7F7F7 !important;
      }
      .sex-size {
        float: right;
        line-height: 1.5rem;
      }
      .sex-boy{
        color: #6AC0DE;
      }
      .sex-gril{
        color: #FB9CC1;
      }
      .sex-grboy{
        color: #22EAAA;
      }
      button.button-block, button.button-full, .button-full > button.button, input.button.button-block {
        width: 70%;   
        }
        .button {
            border-color: transparent;
            background-color: #07E9A1;
            color: #fff;
            position: relative;
            margin: 3rem auto;
            padding: 0 12px;
            min-width: 52px;
            min-height:30px;
            border-width: 1px;
            border-style: solid;
            border-radius: 1rem;
            vertical-align: top;
            text-align: center;
            text-overflow: ellipsis;
            font-size: 16px;
            line-height:40px;
        
        }
        .btn-div{
            margin: 3rem 0
        }
        .bar-positive h4{
            background-color: #07E9A1;
            text-align: center;
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
        }


    </style>
    <body>
        <ion-header-bar  class="bar-positive">
             <h4 class="title">性别</h4>
        </ion-header-bar>

        <ion-content>
        <label class="item item-radio">
          <input type="radio" name="group" value="boy">
          <div class="radio-content">
            <div class="item-content">
             <img src="../img/boy.png" /><span class="sex-size sex-boy">男生</span>
            </div>
           
            </div>
        </label>

         <label class="item item-radio">
          <input type="radio" name="group" value="gril">
          <div class="radio-content">
            <div class="item-content">
             <img src="../img/gril.png" /><span class="sex-size sex-gril">女生</span>
            </div>
            </div>
        </label>

        <label class="item item-radio" >
          <input type="radio" name="group" value="grboy">
          <div class="radio-content">
            <div class="item-content">
             <img src="../img/grboy.png" /><span class="sex-size sex-grboy">保密</span>
            </div>
            </div>
        </label>

        <div class="btn-div">
             <button class="button button-block">完成</button>
        </div>
       </ion-content>

    
  </body>
</html>
